import React, { useEffect, useState } from 'react';
import api from '../request';
import { PoemSimpleResponseDTO } from 'poetry';
import { Container } from 'react-bootstrap';
import { Link, useParams } from 'react-router-dom';
import PoemList from '../Component/PoemList';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useRequireLogin } from '../utils';

function CollectionDetailPage({ collectionId }) {
    useRequireLogin();

    const [poems, setPoems] = useState(/** @type {PoemSimpleResponseDTO[]} */([]));
    const params = useParams();
    collectionId = collectionId || params.id;

    useEffect(() => {
        api.listPoemsInCollection(collectionId, (err, data, _) => {
            if (err) {
                console.error(err);
                return;
            }
            setPoems(data.data);
        });
    }, []);

    return (
        <Container>
            <h1>收藏夹</h1>
            <Link to="/me/collection">
                <FontAwesomeIcon icon="arrow-left" className="me-2" />
                返回
            </Link>
            <PoemList poems={poems} />
        </Container>
    )
}

export default CollectionDetailPage;